<template>
  <form>
    <slot name="default"></slot>
    <div class="submit-area" @click.prevent="submitForm">
      <slot name="submit">
        <!-- <button type="submit" class="btn btn-primary">提交</button> -->
      </slot>
    </div>
  </form>
</template>

<script lang="ts">
import { defineComponent, onUnmounted } from 'vue'
import mitt from "mitt"
export const emitter = mitt()
type ValidateFunc = () => boolean;

export default defineComponent({
    name: "ValidateForm",
    emits: ["form-submit"],
    setup(props, context) {
         let funcArray: ValidateFunc[] = [];
         const submitForm = () => {
             const result = funcArray.map((func)=> func()).every((result) => result)
             context.emit("form-submit",result)
         }
         const callBack = (func:ValidateFunc |any) => {
             funcArray.push(func)
         }
         emitter.on("form-item-created",callBack);

         onUnmounted(() => {
            emitter.off("form-item-created", callBack);
         });
         return {
             submitForm
         }
    },
})
</script>
